<template>
	<view class="pages">
		<u-navbar
		:immersive="true"
		:title-color="isTop?'#fff':'#000'" 
		:back-icon-color="isTop?'#fff':'#000'"
		:background="{
			backgroundColor: `rgba(256,256,256,${opacityNum})`,
		}" 
		:title="isTop?' ': title"></u-navbar>
		<view class="bgcolor">
			<u-swiper :list="swiperList" height="576"></u-swiper>
		</view>
		<view class="vessel" v-if="details.name">
			<view class="prive">
				<view class="left">
					<text class="discounts">
						<text class="text">¥</text> {{details.price}}
						<text class="discounts-texts" v-if="details.single_price" v-show="!isRec">(单次价格：<text>¥</text>{{details.single_price}})</text>
					</text>
					<!-- <view class="vip">
						会员价：¥<text> {{details.vip_price}}</text>
					</view> -->
				</view>
				<view v-if="token" @click="share">
					<!-- <button open-type='share' class="sharebtn" > -->
						<text class="iconfont icon-fenxiang"></text>
						分享
					<!-- </button> -->
				</view>
				<view v-else @click="share">
					<text class="iconfont icon-fenxiang"></text>
					分享
				</view>
			</view>
			<view class="goods-title">
				<view class="t1">{{details.name}}</view>
				<view class="pls">
					<view class="t2">
						<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>
						{{details.duration}}分钟
					</view>
					<view class="t2" v-if="details.use_num">
						可用{{details.use_num}}次
					</view>
				</view>
				<view class="organization" v-if="tabIndex == 1">机构名称：{{details.store.title}}</view>
				<view class="t3">
					<view class="t3-title">保障</view>
					<view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>随时退</view>
					<view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>过期退</view>
					<!-- <view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>需预约</view> -->
					<view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/xingxing.png"></image>7天无理由</view>
					<!-- 随时退／过期退／需预约 -->
					<text class="t3-dec">已售{{details.sold_num}}份</text>
				</view>
			</view>
			
			<!-- 针对部位 -->
			<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>针对部位</view>
			<view class="contrapose">
				<view v-for="item in details.limbs">
					<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/good2.png"></image>{{item.name}}
				</view>
			</view>
			
			<!-- 项目功效 -->
			<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>项目功效</view>
			<view class="efficacy">
				<view v-for="item in details.tags">{{item.tags.name}}</view>
			</view>
			
			<!-- 项目详情 -->
			<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>项目详情</view>
			<view class="details">
				<u-parse :html="details.content"></u-parse>
			</view>
			
			<!-- 用户评价 -->
			<view class="goods-sku" @click="utlis.goUrl(`/pages/shop/comment?project_id=${project_id}`)">
				<view class="sku">
					<view class="t1"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>用户评价</view>
					<view class="t2">全部评价</view>
					<view class="iconfont icon-a-arrowbeifen3"></view>
				</view>
				<view class="evaluate" v-if="commentList.user">
					<view class="evaluate__box">
						<view class="evaluate__box-left"><image :src="commentList.user.avatar || '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg234567.png'"></image></view>
						<view class="evaluate__box-right">
							<view class="evaluate__box-right-title">{{commentList.user.username}} <view><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zan.png"></image>五星好评</view></view>
							<view class="evaluate__box-right-dec">
								<text class="left">已购{{commentList.ordersProject.project_name}}</text>
							</view>
							<text class="evaluate__box-right-time">{{commentList.create_time}}</text>
						</view>
					</view>
					<view class="evaluate__dec">{{commentList.content}}</view>
					<view class="evaluate__img" v-if="commentList.files">
						<image @click="utlis.previewImage(commentList.files)" v-for="(ele,index1) in commentList.files" :key="index1" :src="ele"></image>
					</view>
				</view>
				<view v-else class="available">暂无评论~</view>
			</view>
			
			<!-- 购买须知 -->
			<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>购买须知</view>
			<view class="details">
				<view class="notice">{{details.notice}}</view>
			</view>
			
		</view>
		
		<!-- 二维码弹窗 -->
		<u-popup v-model="showPopup" safe-area-inset-bottom mode="center" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.5)'}" border-radius="40" @close="close">
			<view class="popBox">
				<view class="popBox-bg">
					<image class="popBox-bg-img" :src="swiperList[0].image"></image>
					<view class="popBox-bg-view">
						<view class="popBox-bg-view-box">
							<view class="titleL">{{details.name}}</view>
							<view class="priceL">￥{{details.price}}</view>
						</view>
						<view class="popBox-bg-view-dec">{{details.duration}}分钟，可用{{details.use_num}}次</view>
					</view>
					<view class="popBox-bg-box">
						<view class="popBox-bg-box-left">
							<view class="title">Hey~</view>
							<view class="dec">扫描二维码查看项目哦！</view>
						</view>
						<view class="popBox-bg-box-right">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Group 1000016583.png"></image>
						</view>
					</view>
				</view>
			
				<view class="shareF">
					<image class="shareF-title" src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/fenxiangzhi.png"></image>
					<view class="shareF-view">
						<view @click.native="downloadFile()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bendi.png"></image>
						</view>
						<view>
							<button open-type='share' class="sharebtn" >
								<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/weixin.png"></image>
							</button>
						</view>
						<view @click.native="guideToTimelineShare()">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/pengyou.png"></image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- <u-modal v-model="isPhoneAuth"  :content="'您还未绑定手机号,请先绑定手机号'">
			<view  slot="confirm-button">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
					绑定
				</button>
			</view>
		</u-modal>
		<u-modal v-model="login" show-cancel-button :content="'您还未登陆,请登录'">
			<view  slot="confirm-button">
				<button @click="getuserinfo" class="wxlogin">
					登录
				</button>
			</view>
		</u-modal> -->
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="isPhoneAuth" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未绑定手机号,请先绑定手机号</view>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin">
					绑定
				</button>
			</view>
		</u-popup>
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="login" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未登陆,请登录</view>
				<view class="loginPop-main">
					<view class="loginPop-main-close" @click="login = false">取消</view>
					<button @click="getuserinfo" class="wxlogin">
						登录
					</button>
				</view>
			</view>
		</u-popup>
		
		<view class="bottom-buy " v-if="details.name">
			<view class="total-price">
				金额：
				<text class="text">
					
					<!-- {{userInfo.vip_id >= 1 ? details.vip_price : details.price}} -->
					{{details.price}}<text>¥</text>
				</text>
			</view>
			<view @click="buy(1)" class="bluess" v-show="!isRec">单次购买</view>
			<view @click="buy(0)" class="btn-ho left-auto">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPhoneAuth:false,
				login:false,
				title:'',
				details:{},
				peoject_id:'',
				show1:false,
				isTop:true,
				opacityNum:0,
				num:1,
				show:false,
				payIndex:0,
				swiperList:[],
				tabIndex:0,
				showPopup:false,
				loginInfo:{
					code:'',
					iv:'',
					encryptedData:'',
					store_id:'',
					share_user_id:'',
					encryptedDataPhone:'',
					ivPhone:''
				},
				list:[{
					checked:false,
					name:'手部',
				},{
					checked:false,
					name:'脚部',
				},{
					checked:false,
					name:'背部',
				}],
				store_ids:'',
				commentList: {},
				project_id:'',
				isRec: false
			};
		},
		//分享到朋友圈
		onShareTimeline: function (res) {
			var that = this;
			that.setUserShare()
			let peoject_id=that.details.id;//获取产品id
			let goods_title=that.title;//获取产品标题
			return {
				title: goods_title,
				path: `/pages/shop/projectInfo?peoject_id=${peoject_id}&share_user_id=${that.userInfo.id}&store_id=${that.store_id}&share_project_id=${peoject_id}`,
			}
		},
		onShareAppMessage: function (res) {
		    var that = this;
			that.setUserShare()
		    let peoject_id=that.details.id;//获取产品id
		    let goods_title=that.title;//获取产品标题
		    // let goods_img=that.selectSku.img;//产品图片
			  if (res.from === 'button') {
			     // 来自页面内转发按钮
			 	  return {
			 		 title: goods_title,
					 path: `/pages/shop/projectInfo?peoject_id=${peoject_id}&share_user_id=${that.userInfo.id}&store_id=${that.store_id}&share_project_id=${peoject_id}`,
			 		 // imageUrl:goods_img //不设置则默认为当前页面的截图
			 	   }
			   }
		},
		onLoad({peoject_id,share_user_id,store_id,share_project_id, scene, type, isRec}) {
			this.isRec = isRec == "1"
			this.project_id = peoject_id
			if (type) this.tabIndex = type
			if(store_id){
				this.store_ids = store_id
				this.$u.vuex("store_id",this.store_ids)
			}
			if(share_project_id){
				this.$u.vuex("share_project_id",share_project_id)
			}
			if(share_user_id){
				this.$u.vuex("share_user_id",share_user_id)
			}
			console.log(peoject_id,share_user_id,store_id,share_project_id)
			this.peoject_id = peoject_id
			// 二维码携带参数
			if (scene) {
				const sceness = decodeURIComponent(scene || '');
				const params = this.parseQuery(sceness);
				console.log('二维码携带参数------------：', params)
				if (params.sz) {
					let newSz = params.sz.split("-")
					console.log('sz----', newSz)
					this.peoject_id = newSz[0]
					this.store_ids = newSz[2]
					this.tabIndex = newSz[3]
					this.$u.vuex("store_id", newSz[2])
					this.$u.vuex("share_project_id", newSz[0])
					this.$u.vuex("share_user_id", newSz[1])
				}
			}
			
			this.getDetails()
		},
		onPageScroll(res) {
			//获取距离顶部距离
			const scrollTop = res.scrollTop;
			if (scrollTop >= 0) {
				// 导航条颜色透明渐变
				if (scrollTop <= 20 && !this.isTop) {
					this.opacityNum = 0;
					this.isTop = true;
					uni.setNavigationBarColor({
						frontColor:'#ffffff',
						backgroundColor:'#000000',
						success() {
							console.log("@");
						},
						fail(err) {
							console.log(err);
						}
					})
				} else if(scrollTop > 20 &&this.isTop){
					this.isTop = false;
					uni.setNavigationBarColor({
						frontColor:'#000000',
						backgroundColor:'#FFFFFF',
						success() {
							console.log("@1");
						},
						fail(err) {
							console.log(err);
						}
					})
				}
				if (20 < scrollTop && scrollTop <= 100) {
					this.opacityNum = scrollTop / 100;
				} else if (scrollTop > 100) {
					this.opacityNum = 1;
				}
			}
		},
		methods:{
			async getComment(id){
				let {data,code} = await this.$u.api.getUserProjectComment({id: id});
				this.commentList = data.data[0]
				if (data.data[0]) {
					this.commentList.files = this.commentList.files.split(",")
				}
			},
			parseQuery(queryStr) {
			  const params = {};
			  queryStr.split('&').forEach(pair => {
			    const [key, value] = pair.split('=');
			    if (key) params[key] = decodeURIComponent(value || '');
			  });
			  return params;
			},
			guideToTimelineShare() {
			    uni.showModal({
			      title: '提示',
			      content: '请点击右上角菜单，选择"分享到朋友圈"',
			      showCancel: false
			    })
			},
			// 保存
			downloadFile() {
				uni.downloadFile({
					url: this.swiperList[0].image,//图片地址
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => { 
				                this.toast('保存成功')
				            },
							fail: (res) => { 
								this.toast('保存失败')
				            }
						})
					}
				})
			},
			share(){
				if(!this.token){
					this.login = true
					return
				}
				this.showPopup = true
			},
			// 保存分享记录
			async setUserShare(){
				let {code,data} = await this.$u.api.setUserShare({project_id:this.peoject_id});
			},
			buy(type){
				if(!this.token){
					this.login = true
					return
				}
				this.$u.vuex("is_single", type)
				this.$u.vuex("chioseProjects",[])
				this.$u.vuex("makeTech",[])
				this.$u.vuex("makeNum","")
				this.$u.vuex("makeProject",[this.details])
				this.details.isDefault = true
				this.$u.vuex("makeProject",[this.details])
				let url = `/pages/reserve/reserve?id=${this.details.id}`;
				if(this.isRec){
					url += `&isRec=1`
				}
				this.utlis.goUrl(url)
				// this.utlis.goUrl(`/pages/shop/projectOrder?peoject_id=${this.details.id}`)
			},
			// 获取项目详情
		  async	getDetails(){
			  let params ={
			  	user_id:this.userInfo.id ? this.userInfo.id : '',
			  	id:this.peoject_id,
				store_id:this.store_ids ? this.store_ids : this.store_id,
			  	share_user_id:this.share_user_id
			  }
			  // console.log()
			   console.log(params,this.tabIndex, "获取详情")
			   let API = this.tabIndex == 0 ? this.$u.api.getProject : this.$u.api.getSysProject
				let {code,data} = await API(params);
				if (!data) return
				if(data.tags){
					// data.tags = data.tags.split(",")
					let arr = []
					if (data.limbs) {
						let limbs = data.limbs.split(",")
						limbs.forEach(ele=>{
							let obj = {
								checked:false,
								name:ele
							}
							arr.push(obj)
						})
					}
					
					data.pics.forEach(v=>{
						this.swiperList.push({
							image:v.pic
						})
					})
					data.limbs = arr
				}
				// data.limbs = data.limbs.split(',')
				this.getComment(data.id)
				this.details = data
				this.title = data.name
				console.log(this.details,"this.details")
			},
			// 授权手机号码
			async getPhoneNumber(e){
				this.loginInfo.encryptedDataPhone = e.detail.encryptedData
				this.loginInfo.ivPhone = e.detail.iv
				if(e.detail.iv){
					uni.login ({
						success: async res => {
							let { code } = res
							 this.loginInfo.code = res.code
							 await this.wxLogin()
						}
					})
				}
			},
			// 授权用户信息
			async getuserinfo(e){
				// 登录
				uni.login({
					success: res => {
					 this.loginInfo.code = res.code
					 this.isClick = true
					}
				})
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: async (res) => {
						let { iv, encryptedData } = res;
						this.loginInfo.iv = iv
						this.loginInfo.encryptedData = encryptedData
						this.loginInfo.share_user_id = this.share_user_id
						this.loginInfo.store_id = this.store_ids ? this.store_ids : this.store_id,
						this.loginInfo.fid = this.fid
						this.wxLogin()
				   },
				   fail:(res1)=>{
					   console.log(res1,'登录失败');
					   this.isClick = false
				   }
				})
			},
			// 登录
			async wxLogin(){
				let {data,code,msg} = await this.$u.api.wxLogin(this.loginInfo);
				uni.hideLoading()
				if(code){
					this.login = false
					if(data.user_token){
						this.$u.vuex('token', data.user_token)
						await this.getUserInfo()
						if(this.store_ids){
							await this.getDetails()
						}
						this.utlis.Toast("登录成功",true)
					}else{
						this.isPhoneAuth = true
					}
				}else{
					this.isClick = false
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let store_id = this.store_ids ? this.store_ids : this.store_id
				let {data,code} = await this.$u.api.userInfo({store_id:store_id});
				if(code){
					this.$u.vuex('userInfo', data)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	position: relative;
	.efficacy{
		border-bottom: 2rpx solid #EDEDED;
		padding-bottom: 30rpx;
		view{
			display: inline-block;
			width: 134rpx;
			height: 52rpx;
			font-size: 24rpx;
			color: #007664;
			text-align: center;
			line-height: 52rpx;
			border-radius: 48rpx;
			background: #E7F3F1;
			color: #007664;
			margin-right: 20rpx;
		}
	}
	.contrapose{
		display: flex;
		border-bottom: 2rpx solid #EDEDED;
		padding-bottom: 30rpx;
		view{
			font-size: 26rpx;
			color: #4D5562;
			margin-right: 20rpx;
			image{
				width: 29rpx;
				height: 29rpx;
				margin-right: 10rpx;
				position: relative;
				top: 3rpx;
			}
		}
	}
	.plsTitle{
		font-size: 28rpx;
		color: #242833;
		line-height: 26rpx;
		margin-bottom: 32rpx;
		margin-top: 32rpx;
		font-weight: bold;
		image{
			width: 9rpx;
			height: 29rpx;
			position: relative;
			top: 5rpx;
			margin-right: 12rpx;
		}
	}
	.commentWrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 686rpx;
		height: 90rpx;
		background: #f6f7fa;
		border-radius: 16rpx;
		padding: 0 38rpx;
		margin-bottom: 50rpx;
		color: #333333;
		font-size: 26rpx;
		.right{
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}
	}
	.limbsWrap{
		display: flex;
		.limbsList{
			margin-right: 26rpx;
			color: #333333;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
	.bgcolor{
		width: 750rpx;
		height: 525rpx;
		image{
			position: fixed;
			top: 0;
			z-index: -1;
			width: 100%;
			height: 567rpx;
			display: block;
		}
	}
	.vessel{
		position: absolute;
		width: 100%;
		z-index: 2;
		padding: 0 35rpx;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 50rpx 50rpx 0rpx 0px;
		background: #ffffff;
		padding-bottom: 300rpx;
		.prive{
			display: flex;
			height: 124rpx;
			align-items: center;
			justify-content: space-between;
			// border-bottom: 1px solid rgba(151,151,151,0.38);
			.left{
				display: flex;
				align-items: center;
			}
			.discounts{
				width: 550rpx;
				font-size: 40rpx;
				font-weight: 500;
				text-align: left;
				color: #007664;
				line-height: 38rpx;
				padding-left: 20rpx;
				position: relative;
				.text{
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 30rpx;
				}
				&-texts{
					font-size: 24rpx;
					color: #007664;
					letter-spacing: 1px;
					font-weight: 400;
					padding-left: 20rpx;
				}
			}
			.vip{
				margin-left: 24rpx;
				font-size: 20rpx;
				font-weight: 500;
				text-align: left;
				color: #ffffff;
				// width: 191rpx;
				padding: 0 20rpx;
				height: 52rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(138deg,#f2e4a2 0%, #d1b87d 90%);
				border-radius: 45rpx;
				text{
					font-size: 30rpx;
					font-weight: 500;
					text-align: left;
					color: #ffffff;
					margin-left: 5rpx;
				}
			}
			view{
				font-size: 24rpx;
				font-weight: 400;
				text-align: left;
				color: #666666;
				line-height: 33rpx;
				text{
					margin-right: 8rpx;
				}
			}
			button{
				padding: 10rpx 20rpx;
				margin-right: 0;
			}
		}
		.title-t1{
			font-size: 26rpx;
			font-weight: 400;
			text-align: left;
			color: #333333;
			line-height: 26rpx;
			margin-bottom: 24rpx;
		}
		.goods-title{
			font-size: 32rpx;
			font-weight: 400;
			color: #000000;
			line-height: 45rpx;
			.t1{
				margin-bottom: 20rpx;
			}
			.t2{
				display: inline-block;
				width: 121rpx;
				height: 42rpx;
				border-radius: 6rpx;
				color: #E8BC88;
				font-size: 20rpx;
				text-align: center;
				line-height: 42rpx;
				background: linear-gradient(135deg, #2D3039 0%, #495057);
				margin-right: 15rpx;
				
				image{
					width: 20rpx;
					height: 20rpx;
					position: relative;
					top: 3rpx;
					margin-right: 10rpx;
				}
			}
			.t3{
				position: relative;
				margin-top: 10rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #EDEDED;
				&-title{
					font-size: 28rpx;
					color: #242833 !important;
					font-weight: bold;
				}
				.icon-a-arrowbeifen3{
					position: absolute;
					right: 0;
					top: 5rpx;
				}
				view{
					display: inline-block;
					font-size: 28rpx;
					color: #666666;
					margin-right: 22rpx;
				}
				image{
					width: 31rpx;
					height: 31rpx;
					position: relative;
					top: 5rpx;
					margin-right: 5rpx;
				}
				&-dec{
					font-size: 24rpx;
					color: #999999;
					position: absolute;
					right: 0;
					top: 10rpx;
				}
			}
			text{
				font-size: 24rpx;
				font-weight: 400;
				color: #aaaaaa;
				line-height: 33rpx;
			}
		}
		.serve-box{
			background: #f6f7fa;
			border-radius: 20rpx;
			padding: 32rpx 31rpx;
			.title{
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 44rpx;
				margin-bottom: 16rpx;
			}
			input{
				width: 100%;
				height: 60rpx;
			}
		}
		.label-box{
			display: flex;
			margin-bottom: 32rpx;
			.label-zi{
				margin-left: 20rpx;
				padding: 0 20rpx;
				height: 52rpx;
				background: hsla(12, 96%, 27%, 0.1);
				border-radius: 26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				color: hsla(12, 96%, 27%, 1);
				&:nth-child(1){
					margin-left: 0;
				}
			}
		}
		.project-img{
			margin-bottom: 32rpx;
			height: 402rpx;
			width: 686rpx;
		}
		.notice{
			background: #FAFAF6;
			font-size: 24rpx;
			font-weight: 400;
			text-align: left;
			color: #4D5562;
			padding: 32rpx;
			border-radius: 10rpx;
		}
	}
	.bottom-buy{
		z-index: 99;
		box-shadow: 0px 0px 13rpx 0px rgba(110,126,189,0.18); 
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// @if env(safe-area-inset-bottom)!=0{
		// 	padding: 35rpx 35rpx env(safe-area-inset-bottom);
		// }@else{
			padding: 35rpx;
		// }
		display: flex;
		align-items: center;
		background-color: #fff;
		.total-price{
			font-size: 30rpx;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			.text{
				font-size: 40rpx;
				color: #007664;
				padding-left: 20rpx;
				position: relative;
				text{
					font-size: 30rpx;
					margin-right: 5rpx;
					position: absolute;
					bottom: 5rpx;
					left: 0;
				}
			}
		}
		.btn-ho{
			width: 200rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #50DCC2 0% , #007664);
			border-radius: 53rpx;
			font-size: 30rpx;
			color:#ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
.details{
	margin-bottom: 40rpx;
}
.bluess{
	color: #007664;
	position: absolute;
	right: 250rpx;
}
.organization{
	font-size: 28rpx;
	margin-top: 18rpx;
	color: #333;
}	
.popBox{
	background-color: transparent !important;
	&-bg{
		width: 616rpx;
		height: 890rpx;
		// background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Group 1000016583.png');
		// background-repeat: no-repeat;
		// background-size: cover;
		// text-align: center;
		background: white;
		border-radius: 50rpx;
		&-img{
			width: 560rpx;
			height: 545rpx;
			margin: 28rpx;
			border-radius: 50rpx;
		}
		&-box{
			display: flex;
			margin: 30rpx 28rpx 0 28rpx;
			&-left{
				flex: 1;
				.title{
					font-size: 32rpx;
					color: #4D5562;
				}
				.dec{
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
			&-right{
				image{
					width: 111rpx;
					height: 111rpx;
				}
			}
		}
		&-view{
			&-box{
				display: flex;
				margin-left: 26rpx;
				.titleL{
					width: 70%;
					// border: 1rpx solid red;
					font-size: 36rpx;
					color: #333333;
					white-space:nowrap; 
					overflow:hidden; 
					text-overflow:ellipsis;
				}
				.priceL{
					flex: 1;
					color: #007664;
					font-size: 35rpx;
					text-align: right;
					margin-right: 26rpx;
					text{
						font-size: 20rpx;
					}
				}
			}
			&-dec{
				margin-left: 26rpx;
				font-size: 26rpx;
				color: #999999;
				padding-bottom: 20rpx;
				border-bottom: 1rpx dashed #EDEDED;
				width: 90%;
				margin-top: 5rpx;
			}
		}
	}
	.shareF{
		background-color: transparent !important;
		text-align: center;
		&-title{
			width: 237rpx;
			height: 24rpx;
			margin: 65rpx 0 52rpx 0;
		}
		&-view{
			display: flex;
			justify-content: space-between;
			width: 85%;
			margin: 0 auto;
			view{
				flex: 1;
				text-align: center;
				image{
					width: 100rpx;
					height: 144rpx;
				}
			}
		}
	}
}
::v-deep .u-mode-center-box{
	background-color: transparent !important;
}
.goods-sku{
	// padding: 0 12rpx;
	// padding: 0 35rpx;
	// background: #f6f7fa;
	border-radius: 20rpx;
	margin-bottom: 52rpx;
	
	.sku{
		// padding: 0 26rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		// border-bottom: 1px solid rgba(142,142,142,0.24);
		&:nth-last-child(1){
			border-bottom: none;
		}
		
		font-size: 26rpx;
		font-weight: 400;
		text-align: left;
		color: #333333;
		line-height: 26rpx;
		.t2{
			font-size: 24rpx;
			color: #999999;
		}
		.icon-a-arrowbeifen3{
			color: #999999;
		}
		.t1{
			margin-right: auto;
			font-size: 28rpx;
			color: #242833;
			font-weight: bold;
			image{
				width: 9rpx;
				height: 29rpx;
				position: relative;
				top: 5rpx;
				margin-right: 12rpx;
			}
		}
	}
}

.evaluate{
	width: 686rpx;
	background: #FAFAF6;
	padding: 22rpx;
	border: none;
	border-radius: 18rpx;
	&__box{
		display: flex;
		&-left{
			image{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}
		}
		&-right{
			flex: 1;
			position: relative;
			&-time{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 24rpx;
				color: #999999;
			}
			&-title{
				font-size: 26rpx;
				color: #242833;
				display: flex;
				margin-left: 20rpx;
				view{
					
					width: 114rpx;
					height: 31rpx;
					line-height: 28rpx;
					color: #845C11;
					font-size: 18rpx;
					background: #E5C372;
					text-align: center;
					margin-left: 30rpx;
				}
				image{
					width: 19rpx;
					height: 19rpx;
					position: relative;
					top: 2rpx;
					margin-right: 5rpx;
				}
			}
			&-dec{
				width: 100%;
				margin-left: 20rpx;
				color: #999999;
				font-size: 20rpx;
				margin-top: 10rpx;
				display: flex;
				text{
					// border: 1rpx solid red;
					flex: 1;
				}
			}
		}
	}
	&__dec{
		font-size: 24rpx;
		color: #4D5562;
		margin: 20rpx 0;
	}
	&__img{
		display: flex;
		justify-content: space-between;
		image{
			width: 148rpx;
			height: 148rpx;
			border-radius: 12rpx;
		}
	}
}


.sharebtn{
	margin: 0;
	padding: 0;
	background: transparent;
}
	button:after{
		border: none;
	}
	button{
		background-color: #FFFFFF;
		font-size: 28rpx;
		color: #666;
	}

</style>
